<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="public/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/blue.css">
    <link rel="stylesheet" href="css/frame.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">

        /* tooltip */
        #tooltip {
            position: absolute;
            border: 1px solid #ccc;
            background: #333;
            padding: 2px;
            display: none;
            color: #fff;
        }

    </style>
<body>

<fieldset class="layui-elem-field site-demo-button" style="margin: 30px 0 0 30px;border:0">
    <button class="layui-btn layui-btn-sm layui-btn-radius" id="jar-btn">新增JAR应用</button>
</fieldset>

<hr class="layui-bg-gray">
<table class="layui-hide" id="test"></table>

<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="state" disabled="" value="{{d.state}}" lay-skin="switch" lay-text="运行|停止"
           lay-filter="status" {{ d.state== 'on' ? 'checked' : '' }}>
</script>

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="禁用" lay-filter="lockDemo" {{ d.id== 10006
           ? 'checked' : '' }}>
</script>

<script type="text/html" id="instanceTpl">
    <a href="javascript:;" data-id="{{ d.serviceName }}" class="layui-table-link" name="instance-btn">{{ d.insSummary
        }}</a>
</script>
<div style="padding:0 20px;"></div>


<script src="public/layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/loader.js" charset="utf-8"></script>

<table class="layui-table" lay-data="{url:'/package?sn='+serviceName,  done:function(){page.done()}, page: { layout: ['prev', 'page', 'next', 'skip','count'] }, id:'repoList'}" lay-filter="repoList">
    <thead>
    <tr>
        <th lay-data="{type:'numbers'}"></th>
        <th lay-data="{field:'id', width:1, minWidth:1}"></th>
        <th lay-data="{field:'jarName',minWidth:160}">JAR名称</th>
        <th lay-data="{field:'serviceName', width:190}">服务编码</th>
        <th lay-data="{field:'branch', width:80}">分支</th>
        <th lay-data="{field:'version', width:215}">版本</th>
        <th lay-data="{width:80, align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
</table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs oka-btn-radius" lay-event="sel" style="margin:0" name="sel">选择</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs oka-btn-radius" style="margin:0" name="del" lay-event="del">删除</a>
</script>
<script>
    /*
    var message;
    layui.config({
        base: '/js/',
        version: '1.0.1'
    }).use(['app', 'message', "oka"], function() {
        var app = layui.app,
            $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
            type: 'iframe'
        }).init();
    });
    */
</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

    var serviceName = location.hash.substring(1);
    var page = {
        done:function() {
            if(serviceName != "") {
                $("[name='del']").hide();
            } else {
                $("[name='sel']").hide();
            }
        }
    }
    layui.use(['layer', 'table', 'laypage','oka'], function () {
        var layer = layui.layer
            , table = layui.table
            ,laypage = layui.laypage;
        if(serviceName != "") {
            $("#jar-btn")[0].parentNode.style.display = "none";
        }

        //oka.loading.open();
        laypage.render({
            elem: 'repoList'
            ,count: 70 //数据总数，从服务端得到
            ,jump: function(obj, first){
                console.log(obj);
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if(!first){
                    //do something
                }
            }
        });


        /*
        $.ajax({
            url: "/package?sn="+serviceName
            , type: "GET"
            , dataType: "json"
            , async: true
            , success: function (res) {
                oka.loading.close();
                //obj = null;
                table.reload("repoList", res)
                laypage.render({
                    elem: 'test1'
                    ,count: 70 //数据总数，从服务端得到
                    ,jump: function(obj, first){
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if(!first){
                            //do something
                        }
                    }
                });
                if(serviceName != "") {
                    $("[name='del']").hide();
                } else {
                    $("[name='sel']").hide();
                }
            }
        });
*/
        $('#jar-btn').click(function () {
            layer.open({
                type:2,
                title:"增加JAR应用",
                content:["addJarPackage.html", 'yes'],
                area: ['700px', '360px'],
                end:function(){

                    if(oka.page.ret != undefined) {

                        var d = table.cache.repoList.slice();
                        var ret = JSON.parse(oka.page.ret);
                        d.push(ret);

                        table.reload("repoList", {
                            data:d
                        })


                        delete oka.page["ret"];



                        form.render();
                    }
                }
            });
        });

        $('#machine-btn').click(function () {
            layer.open({
                type: 2,
                title: "管理机器",
                content: ["machine.html", 'yes'],
                area: ['580px', '372px'],
                end: function () {
                    //location.reload();
                    //lay-data
                }
            });
        });

        $('#ability-btn').click(function () {
            layer.open({
                type: 2,
                title: "添加新服务",
                content: ["addService.html", 'yes'],
                area: ['450px', '276px'],
                end: function () {
                    if (oka.page.ret != undefined) {

                        var d = table.cache.repoList.slice();
                        var ret = JSON.parse(oka.page.ret);
                        d.push(ret);
                        table.reload("repoList", {
                            data: d
                        })


                        delete oka.page["ret"];


                        //form.render();
                    }
                }
            });
        });
    });


</script>
<script>
    window.pageContext = {};
    layui.use('table', function () {

        var table = layui.table
            , form = layui.form;

        console.log(table);
        table.on('tool(repoList)', function (obj) {

            var data = obj.data, index = obj.index;
            console.log(this)
            if (obj.event === 'del') {
                layer.confirm('确认要删除jar？', function (index) {
                    oka.loading.open();
                    $.ajax({
                        url: "/package/" + data.id
                        , type: "DELETE"
                        , async: true
                        , success: function (res) {
                            oka.loading.close();
                            if (res == "0") {
                                layer.msg('操作失败!!！', {
                                    offset: "t",
                                    anim: 6
                                });

                            } else {
                                layer.msg('操作成功', {
                                    time: 600
                                });
                                obj.del();
                                layer.close(index);
                            }

                            obj = null;

                        }
                    });
                });
            } else if (obj.event === 'sel') {
                //parent.oka.page.ret="aaaa";
                var dom = parent.frames["layui-layer-iframe"+ parent.oka.parentIndex].$("#repoId")[0]
                dom.value=data.id;
                dom.nextSibling.value = data.branch + ":" + data.version;
                parent.layer.close(parent.layer.index);

            }
            return true;
        });


        //监听性别操作
        form.on('switch(sexDemo)', function (obj) {

            layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);

        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function (obj) {
            layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
        });
        $(document).on('click', '.layui-table>tbody>tr', function (e) {
            //console.log($(this)[0])
            if (e.target.name == "instance-btn") {

                var name = e.target.getAttribute("data-id");

                layer.open({
                    type: 2,
                    title: "管理服务实例",
                    content: ["addInstance.html#" + name, 'yes'],
                    area: ['640px', '400px'],
                    end: function () {
                        if (oka.page.ret != undefined) {
                            var ret = JSON.parse(oka.page.ret);
                            delete oka.page["ret"];
                            obj.update(ret);
                            console.log(ret);
                            if (ret.status == "on") {
                                obj.tr[0].querySelector('[name="status"]').setAttribute("checked", true);
                            } else {
                                obj.tr[0].querySelector('[name="status"]').removeAttribute("checked");
                            }


                            form.render();
                        }

                    }
                });
            }

        })

    });
</script>


</body>
</html>